<template>
	<div v-if="value" class="add-modal">
		<div class="wraper">
			<h3>{{type==='add'?'创建课程':'修改课程信息'}}</h3>
			<div class="body">
				<div class="input-wraper">
					<input placeholder="课程名称" v-model="n" />
				</div>
				<div class="input-wraper">
					<select>
						<option>UI设计</option>
						<option>前端开发</option>
					</select>
				</div>
				<div class="input-wraper">
					<select v-model="s">
						<option value="updating">更新中</option>
						<option value="completed">已完结</option>
						<option value="pause">暂停更新</option>
					</select>
				</div>
			</div>
			<div class="foot">
				<button class="c-btn gradient-primary" @click="onConfirm">{{type==='add'?'确认创建':'确认修改'}}</button>
				<button class="c-btn" @click="close">取消</button>
			</div>
			<div class="iconfont del" @click="close">&#xe6e9;</div>
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			'value':{type:Boolean},
			'type':{type:String, default:'add'},
			'name':{type:String},
			'status':{type:String, default:'updating'}
		},
		data(){
			return{
				n: '',
				s: this.status
			}
		},
		watch:{
			name(name){this.n = name},
			status(status){this.s = status},
			value(v){if(!v){this.n='';this.s='updating'}}
		},
		methods:{
			close(){
				this.$emit('input', false)
			},
			onConfirm(){
				this.$emit('confirm', {name:this.n, status:this.s, type:this.type})
			}
		}
	}
</script>

<style lang="scss">
@import '../../components/modal/modal.scss';
</style>
